<template>
  <div>
    <div style="margin: 20px;">
      <el-form :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="queryParam.userName" placeholder="请输入姓名" clearable />
        </el-form-item>
        <el-form-item label="届数">
          <el-input v-model="queryParam.edition" placeholder="请输入届数" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>

        <div>
          <el-button type="primary" @click="add">添加理事会成员</el-button>
        </div>
      </el-form>

      <div style="margin-top: 20px;">
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="edition" label="届数" />
          <el-table-column prop="unitPosition" label="任职单位职务与职称" min-width="120" />
          <el-table-column prop="sort" label="排序" />
          <el-table-column prop="userName" label="姓名" />
          <el-table-column prop="workUnit" label="工作单位" min-width="120" />
          <el-table-column prop="status" label="状态">
            <template #default="{ row }">
              <el-tag :type="row.status === 1 ? 'success' : 'danger'">
                {{ row.status === 1 ? '可用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="edit(row)">编辑</el-button>
              <el-button link type="primary" size="small" @click="del(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;">
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            layout="total,prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <bs-association-council-form ref="associationCouncilForm" @refresh="refresh" />
  </div>
</template>

<script setup lang="ts">
import { ref ,useTemplateRef} from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import {instance} from "../../request.js";
import type ResultType from "../../type/ResultType.ts";
import BsAssociationCouncilForm from "../../components/BsAssociationCouncilForm.vue";

// 获取组件引用
let bsAssociationCouncilForm = useTemplateRef('associationCouncilForm')

// 分页相关
const pageNo = ref(1)
const pageSize = ref(5)
const total = ref(0)
function handleCurrentChange() {
  getData()
}

// 查询条件
const queryParam = ref({
  userName: '',
  edition: '',
})
const tableData = ref([])

// 分页获取表格数据
async function getData(query = {}) {
  try {
    let result: ResultType = await instance.get('/bsAssociationCouncils/page', {
      params: {
        pageNum: pageNo.value,
        pageSize: pageSize.value,
        ...queryParam.value,
        ...query,
      },
    })
    let { code, data, msg } = result.data
    if (code == 200) {
      tableData.value = data.list
      total.value = data.total
    } else {
      ElMessage({ message: msg, type: 'warning', })
    }
  } catch (e) {
    console.log(e)
    ElMessage({ message: '获取表格数据失败', type: 'warning', })
  }
}

// 查询方法
function query() {
  getData(queryParam.value)
}

// 删除方法
async function del(row: any) {
  try {
    await ElMessageBox.confirm('此操作将永久删除该理事会成员信息，是否继续？', { title: '提示', })
    try {
      let result: ResultType = await instance.delete(`/bsAssociationCouncils/${row.id}`)
      let { code, msg } = result.data
      if (code == 200) {
        ElMessage({ message: '删除成功', type: 'success', })
        getData()
      } else {
        ElMessage({ message: msg, type: 'warning', })
      }
    } catch (e) {
      console.log(e)
      ElMessage({ message: '删除失败', type: 'warning', })
    }
  } catch (e) {
  }
}

// 添加事件
function add() {
  bsAssociationCouncilForm.value?.add()
}

// 编辑事件
function edit(row: any) {
  bsAssociationCouncilForm.value?.edit(row)
}

// 刷新方法
function refresh() {
  pageNo.value = 1
  getData()
}

// 请求数据
getData()
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>